<template>
  <div class="content-wrapper">
    <div class="content-container">
      <el-form :inline="true" :model="listQuery" class="filter-container">
        <el-form-item label="状态">
          <el-select
            v-model="listQuery.status"
            size="mini"
            style="width: 120px"
          >
            <el-option
              v-for="item in statusOptions"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="搜索条件">
          <el-select
            v-model="listQuery.keywordField"
            size="mini"
            placeholder="请选择"
            style="width: 100px"
          >
            <el-option
              v-for="item in conditionOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="关键字">
          <el-input
            v-model="listQuery.keyword"
            size="mini"
            style="width: 120px"
          />
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="listQuery.datetimeRange"
            type="daterange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
            size="mini"
            style="width: 240px"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            class="filter-item"
            size="small"
            round
            type="primary"
            icon="el-icon-search"
            @click="getDataList"
          >
            搜索
          </el-button>
        </el-form-item>
      </el-form>
      <el-table
        v-loading="listLoading"
        :data="list"
        highlight-current-row
        default-expand-all
        height="600"
        align="center"
        header-cell-class-name="custome-el-table-header-cell2"
        cell-class-name="custome-el-table-cell2"
      >
        <el-table-column
          align="center"
          label="状态"
          prop="status"
          width="100px"
        >
          <template slot-scope="{ row }">
            {{ formatByKeyValue(statusOptions, row.handOverResult) }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="交付类型"
          prop="handOverResult"
          min-width="100px"
        >
          <template slot-scope="{ row }">
            {{ formatByKeyValue(orderTypeOptions, row.handOverResult) }}
          </template></el-table-column>
        <el-table-column
          align="center"
          label="交付单号"
          prop="manufactureResultCode"
          min-width="100px"
        />
        <!-- <el-table-column
        align="center"
         label="生产个数" prop="orderCount" width="160px" />
        <el-table-column
        align="center"
         label="交付个数" prop="passOrderCount" width="160px" /> -->
        <el-table-column
          align="center"
          type="expand"
          width="20"
        >
          <template slot-scope="{ row }">
            <el-row>
              <el-col :span="20">
                <GoodsTableTemplate
                  :goods-data-list="row.manufactureResultGoodsList"
                  :goods-type="row.orderType"
                  :open-type="'result'"
                />
              </el-col>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="交付人"
          prop="createUserName"
          width="100px"
        />
        <el-table-column
          align="center"
          label="交付时间"
          prop="checkTime"
          width="160px"
        />
        <!-- <el-table-column
          label="操作"
          align="center"
          width="150px"
          fixed="right"
        >
          <template slot-scope="{ row }">
            <el-dropdown trigger="click" class="filter-item">
              <el-button type="text" class="el-icon-more" />
              <el-dropdown-menu slot="dropdown" class="user-dropdown">
                <el-dropdown-item
                  v-if="row.handOverResult === 1"
                  @click.native="InformSplit(row)"
                >
                  通知入库
                </el-dropdown-item>
                <el-dropdown-item
                  v-if="row.handOverResult === 2"
                  @click.native="InformQc(row)"
                >
                  通知质检
                </el-dropdown-item>
                <el-dropdown-item
                  v-if="row.handOverResult === 4"
                  @click.native="InformSplit(row)"
                >
                  通知分装
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column> -->
      </el-table>
      <Pagination
        v-show="total > 0"
        :total="total"
        :page-number.sync="listQuery.pageNumber"
        :page-size.sync="listQuery.pageSize"
        @pagination="getDataList"
      />
    </div>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import {
  viewLotProduction,
  pushQa
} from '@/api/mes/manufactureOrder.js'
import { getResultPage } from '@/api/mes/manufactureResult.js'
import { formatByKeyValue } from '@/utils'
import { listDictTreeItem } from '@/api/base/dict'
import GoodsTableTemplate from '@/views/manufacture/components/GoodsTableTemplate/index.vue'
import { newSort } from '@/utils/common.js'
import { taskListPreOptions } from '@/api/am/acceptanceTask'

import { orderListPreOptions } from '@/api/mes/manufactureOrder'

export default {
  components: {
    Pagination,
    GoodsTableTemplate
  },
  data() {
    return {
      total: 0,
      listQuery: {
        pageNumber: 1,
        pageIndex: 0,
        pageSize: 10,
        subProductDictCode: '',
        batchCode: '',
        withGoodsFlag: true
      },
      listLoading: false,
      list: [{}],
      dataList: {},
      viewDialog: false,
      SelectPersonnelData: '',
      applyFordialogVisible: false,
      from: {
        receiveUserName: '',
        receiveUserId: '',
        reason: ''
      },
      SearchPersonnelTypeData: {
        dialogVisible: false
      },
      manufactureArchiveId: '',
      ProductList: [],
      statusOptions: [],
      orderTypeOptions: [],
      conditionOptions: [],
      pickerOptions: [],
      getResultVisible: false
    }
  },
  mounted() {
    newSort
    // taskListPreOptions().then((response) => {
    //   const data = response.data
    //   this.statusOptions = data.handOverResult
    // })
    orderListPreOptions().then((res) => {
      const data = res.data
      this.statusOptions = data.orderStatus

      this.orderTypeOptions = data.orderType
    })
      this.getDataList()

    this.listDictTreeItem()
  },
  methods: {
    formatByKeyValue,
    change(val) {
      this.listQuery.subProductDictCode = val[1]
    },
    listDictTreeItem() {
      listDictTreeItem({
        dictGroupCode: 'product',
        parentDictId: 0
      }).then((res) => {
        this.ProductList = res.data
      })
    },
    // 获取人员
    getPersonnel() {
      this.SelectPersonnelData = {
        dialogReview: true
      }
    },
    // 分页
    getDataList() {
      this.listQuery.pageIndex = this.listQuery.pageNumber - 1
      getResultPage(this.listQuery).then((res) => {
        const data = res.data.rows
        this.list = data
        this.total = res.data.total
      })
    },
    // 获取数据
    async getView(row) {
      this.viewDialog = true
      const data = { manufactureArchiveId: row.manufactureArchiveId }
      this.dataList = await viewLotProduction(data)
    },
    // 提交Qa审核
    pushQa(row) {
      this.SelectPersonnelData = {
        val: 0,
        type: 'qa',
        title: 'QA',
        dialogVisible: true
      }
      this.manufactureArchiveId = row.manufactureArchiveId
    },
    // 占位
    statusMessage(data) {
      console.log(data, 'datass')
      if (data == 1) {
        this.getDataList()
      }
      if (data && data.length > 0) {
        this.from.receiveUserName = data[0].userName
        this.from.receiveUserId = data[0].userId
      }
    },
    /**
     * 提交QA回调函数
     * @param data
     */
    commitQA(data) {
      const user = data[0]
      const saveData = {
        qauserId: user.userId,
        manufactureArchiveId: this.manufactureArchiveId
      }
      pushQa(saveData).then((res) => {
        this.$message.success('提交成功')
      })
    },
    InformQc(row) {
      console.log('通知质检')
    },
    InformSplit(row) {
      console.log('通知封装')
    }
  }
}
</script>
